import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import { $ } from 'protractor';
import { HttpClient } from "@angular/common/http";
import { Router } from '@angular/router';

@Component({
  selector: 'app-correlation',
  templateUrl: './correlation.component.html',
  styleUrls: ['./correlation.component.css']
})
export class CorrelationComponent implements OnInit {

  constructor(private http: HttpClient, private router: Router) {}

  ngAfterViewInit(){
    var myChart1 = echarts.init(document.getElementById("relationChart1"));
    this.load_echarts_force(myChart1,1);
    this.bindChartClickEvent(myChart1);
    var myChart2 = echarts.init(document.getElementById("relationChart2"));
    this.load_echarts_force(myChart2,2);
    this.bindChartClickEvent(myChart2);
    var myChart3 = echarts.init(document.getElementById("relationChart3"));
    this.load_echarts_force(myChart3,3);
    this.bindChartClickEvent(myChart3);
    var myChart4 = echarts.init(document.getElementById("relationChart4"));
    this.load_echarts_force(myChart4,4);
    this.bindChartClickEvent(myChart4);
  }
  ngOnInit() {
    
  }
  redirect(){
    this.router.navigate(["linechart"]);
  }
  load_echarts_force(myChart,index){
      myChart.hideLoading();
      let nodes = [];
      let links = [];
      var filename='assets/data/Cdata'+index+'.json'
      this.http.get(filename)
      .subscribe((data :any)=> {
        for(var i=0;i<data.length;i++){
          let node : any;
          let name = data[i].name;
          var symbol;
          symbol="image://assets/sensors/"+name+".png";
          node = {'category':i,'name':data[i].name,'symbol': symbol,'draggable': true,
          'industry':data[i].industry,'measurement':data[i].measurement,'vendor':data[i].vendor,'credit':data[i].credit,
          "used_days":data[i].used_days,"num_of_events_triggered":data[i].num_of_events_triggered,"num_of_events_cheated":data[i].num_of_events_cheated};
          nodes.push(node);

          for(var j=data.length-1;j>i;j--){
            if(j>i&&j<data.length){
              let link:any;
              if(j==data.length-1)
                link={'source':data[j-1].name,'target':data[0].name,'weight': 100,name: "1","lineStyle":{"normal":{"color": '#FFFFFF',"width":3}}};
              else
                link={'source':data[i].name,'target':data[j-1].name,'weight': 100,name: "1","lineStyle":{"normal":{"color": '#FFFFFF',"width":3}}};
              links.push(link)
            }
          }
          // if(i>0&&i<data.length){
          //   let link:any;
          //   if(i==data.length-1)
          //     link={'source':data[i-1].name,'target':data[0].name,'weight': 100,name: "1","lineStyle":{"normal":{"color": '#FFFFFF',"width":3}}};
          //   else
          //     link={'source':data[i-1].name,'target':data[i+1].name,'weight': 100,name: "1","lineStyle":{"normal":{"color": '#FFFFFF',"width":3}}};
          //   links.push(link)
          // }
        }
        option.series[0].data=nodes;
        option.title.text='Group '+index
        myChart.setOption(option);
      });

    let links1 = [
      {
            source: "1",
            target: "2",
            weight: 100,
            name: "1",
        },
    
      ];
     
      let option = {
          backgroundColor: '#212121',
          title: {
              text: 'Cluster A',
              // subtext: 'Default layout',
              textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                  fontFamily: 'SiemensSans-Roman',
                  fontSize: 30,
                  color:'#FFFFFF'
              },
              top: 'top',
              left: 'left'
          },
          tooltip: {
            
          },

          animation: false,
          series : [
              {
                  symbolSize: [84, 103],
                  type: 'graph',
                  layout: 'force',
                  data: nodes,
                  links: links,
                  force: {
                      repulsion: 2,
                      gravity: 0.03,
                      edgeLength: 270,

                  }
              }
          ],
          
          formatter : function(params){
            // console.log(params[0]);
              var res = '<div style="border-block: 2px;width: 510px;background: grey;height: 200px;">'; 
                res += '<div class="flex-center" style="float: left;background: grey; display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">'; 
                res += params.data.name;
                res += '</div>';

                res += '<div class="flex-center" style="float: right;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">Credit:<span style="font-family:SiemensSans-Roman">&nbsp;&nbsp;&nbsp;';
                res += params.data.credit;
                res += '</span></div>'; 

                res += '<div class="flex-center" style="float: left;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">measurement:<span font-family:SiemensSans-Roman>&nbsp;&nbsp;&nbsp;'; 
                res += params.data.measurement;
                res += "</span></div>";

                res += '<div class="flex-center" style="float: left;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">vendor:<span font-family:SiemensSans-Roman>&nbsp;&nbsp;&nbsp;'; 
                res += params.data.vendor;
                res += "</span></div>";

                res += '<div class="flex-center" style="float: left;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">num_of_events_triggered:<span font-family:SiemensSans-Roman>&nbsp;&nbsp;&nbsp;'; 
                res += params.data.num_of_events_triggered;
                res += "</span></div>";

                res += '<div class="flex-center" style="float: left;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">num_of_rules_cheated:<span font-family:SiemensSans-Roman>&nbsp;&nbsp;&nbsp;'; 
                res += params.data.num_of_events_cheated;
                res += "</span></div>";

                res += '<div class="flex-center" style="float: left;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">industry:<span font-family:SiemensSans-Roman>&nbsp;&nbsp;&nbsp;'; 
                res += params.data.industry;
                res += "</span></div>";
                res += '<div class="flex-center" style="float: left;background: grey;display: flex;;padding: 10px;width:50%;font-family:SiemensSans-Roman">used_days:<span font-family:SiemensSans-Roman>&nbsp;&nbsp;&nbsp;'; 
                res += params.data.used_days;
                res += "</span></div>";
                return res;
            }
      };
  
  }

  isVisible = false;
  isTwoVisible = false;
  bindChartClickEvent(chart){
    let that = this;
    chart.on('click', function(params){
      console.log(params);
      if(params.data.name=="FIT101")
          that.isVisible = true;
      else if(params.data.name=="AIT504")
        that.isTwoVisible = true;
      else
        that.isVisible = true;
    })
  }
  handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
    this.isTwoVisible = false;
  }
}
